<template>
	<view class="container">
		<view class="tui-order-header" @tap="switchStatus">
			<!-- <image :src="webURL+'img_detail_bg.png'" mode="widthFix" class="tui-img-bg"></image> -->
			<view class="tui-header-content">
				<view>
					<!-- <view class="tui-status-text">{{getStatusText(status)}}</view> -->
					<view class="tui-status-text">{{orderDetail.status_text}}</view>
					<view class="tui-reason"><text class="tui-reason-text">{{orderDetail.status_desc}}</text>
						<!-- 	<tui-countdown :time="1800" color="rgba(254,254,254,0.75)" colonColor="rgba(254,254,254,0.75)"
							borderColor="transparent" backgroundColor="transparent" v-if="status===1"></tui-countdown> -->
					</view>

					<!-- <view class="tui-reason"><text class="tui-reason-text">{{getReason(status)}}</text>
						<tui-countdown :time="1800" color="rgba(254,254,254,0.75)" colonColor="rgba(254,254,254,0.75)"
							borderColor="transparent" backgroundColor="transparent" v-if="status===1"></tui-countdown>
					</view> -->
				</view>
				<image :src="getImg(status)" class="tui-status-img" mode="widthFix"></image>
			</view>
		</view>
		<!-- 	<tui-list-cell arrow backgroundColor="#fefefe" @click="logistics">
			<view class="tui-flex-box">
				<image :src="webURL+'img_order_logistics3x.png'" class="tui-icon-img"></image>
				<view class="tui-logistics">
					<view class="tui-logistics-text">快递已到收货点，请注意查收哦! 投递员: echo. 联系电话: 17788849992</view>
					<view class="tui-logistics-time">2019-06-03 12:02</view>
				</view>
			</view>
		</tui-list-cell> -->
		<tui-list-cell unlined :hover="false">
			<view class="tui-flex-box">
				<image :src="webURL+'img_order_address3x.png'" class="tui-icon-img"></image>
				<view class="tui-addr">
					<view class="tui-addr-userinfo" v-if="orderDetail.address && orderDetail.address.consignee">{{orderDetail.address.consignee || ''}}<text
							class="tui-addr-tel">{{orderDetail.address.mobile}}</text></view>
					<view class="tui-addr-text" v-if="orderDetail.address && orderDetail.address.province_name">
						{{orderDetail.address.province_name}}{{orderDetail.address.city_name}}{{orderDetail.address.district_name}}
						{{ orderDetail.address.address }}
					</view>
				</view>
			</view>
		</tui-list-cell>

		<view class="tui-order-item">
		<!-- 	<tui-list-cell :hover="false" :lineLeft="false">
				<view class="tui-goods-title">
					商品信息
				</view>
			</tui-list-cell> -->
			<block v-for="(item,index) in orderDetail.items">

				<tui-list-cell padding="0">
					<view class="tui-goods-item">
						<view>配送方式</view>
						<view>{{item.dispatch_type_text}}</view>
					</view>

				</tui-list-cell>
				<tui-list-cell padding="0">
					<view class="tui-goods-item">
						<image :src="info.app.cdnurl+item.goods_image" class="tui-goods-img"  style="border-radius: 10rpx;"></image>
						<view class="tui-goods-center">
							<view class="tui-goods-name">{{item.goods_title}}</view>
							<view class="tui-goods-attr">{{item.goods_sku_text}}</view>
						</view>
						<view class="tui-price-right">
							<view>￥{{item.goods_price}}</view>
							<view>x{{item.goods_num}}</view>
						</view>
					</view>
				</tui-list-cell>
			</block>
			<view class="tui-goods-info">
				<view class="tui-price-flex tui-size24">
					<view>商品总额</view>
					<view>￥{{orderDetail.goods_amount}}</view>
				</view>
				<view class="tui-price-flex  tui-size24">
					<view>优惠券</view>
					<view>￥0.00</view>
				</view>
				<view class="tui-price-flex  tui-size24">
					<view>配送费</view>
					<view>￥{{orderDetail.dispatch_amount}}</view>
				</view>
				<view class="tui-price-flex tui-size32 tui-pbtm20">
					<view class="tui-flex-shrink">合计</view>
					<view class="tui-goods-price">
						<view class="tui-size-24">￥</view>
						<view class="tui-price-large">{{orderDetail.order_amount}}</view>
					</view>
				</view>
				<view class="tui-price-flex tui-size32">
					<view class="tui-flex-shrink">实付款</view>
					<view class="tui-goods-price tui-primary-color">
						<view class="tui-size-24">￥</view>
						<view class="tui-price-large">{{orderDetail.order_amount}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="tui-order-info">
			<tui-list-cell :hover="false">
				<view class="tui-order-title">
					订单信息
				</view>
			</tui-list-cell>
			<view class="tui-order-content">
				<view class="tui-order-flex">
					<view class="tui-item-title">订单号:</view>
					<view class="tui-item-content">{{orderDetail.order_sn}}</view>
				</view>
				<view class="tui-order-flex">
					<view class="tui-item-title">订单类型:</view>
					<view class="tui-item-content">{{orderDetail.type_text}}</view>
				</view>
				<!-- <view class="tui-order-flex">
					<view class="tui-item-title">物流单号:</view>
					<view class="tui-item-content">33655511251265578556</view>
				</view> -->
				<view class="tui-order-flex" v-if="orderDetail.paid_time">
					<view class="tui-item-title">下单时间:</view>
					<view class="tui-item-content">{{orderDetail.paid_time}}</view>
				</view>
				<view class="tui-order-flex" v-if="orderDetail.paid_time">
					<view class="tui-item-title">支付时间:</view>
					<view class="tui-item-content">{{orderDetail.paid_time}}</view>
				</view>
				<view class="tui-order-flex" v-if="orderDetail && orderDetail.pay_types_text && orderDetail.pay_types_text[0]">
					<view class="tui-item-title">支付方式:</view>
					<view class="tui-item-content">{{orderDetail.pay_types_text[0]}}</view>
				</view>
				
				
				
				<!-- 	<view class="tui-order-flex">
					<view class="tui-item-title">发货时间:</view>
					<view class="tui-item-content">2019-05-27 10:20</view>
				</view>
				<view class="tui-order-flex">
					<view class="tui-item-title">配送方式:</view>
					<view class="tui-item-content">包邮</view>
				</view>
				<view class="tui-order-flex">
					<view class="tui-item-title">订单备注:</view>
					<view class="tui-item-content">麻烦尽快发货，打包包裹时请多拿几个泡沫放在纸箱盒内，防止摔碎</view>
				</view> -->
			</view>
			<tui-list-view unlined="bottom">
				<tui-list-cell unlined>
					<view class="tui-contact">
						
						<button open-type="contact" class="tui-contact">
							<image src="https://thorui.cn/images/mall/group/icon_order_contactmerchant.png"></image>
							<text>联系商家</text>
						</button>

					</view>
				</tui-list-cell>
			</tui-list-view>
		</view>
		<view class="tui-safe-area"></view>
		<view class="tui-tabbar tui-order-btn">
			<!-- <view class="tui-btn-mr">
				<tui-button type="black" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle">删除订单</tui-button>
			</view> -->
			
			
			
			<view class="tui-btn-mr" v-for="(item,index) in orderDetail.btns" :key="index">
				<tui-button type="black" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle" @click="applyRefund(orderDetail)" v-if="item=='apply_refund'">申请退款</tui-button>
				<tui-button type="black" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle" @click="refund" v-if="item=='express'">查看物流</tui-button>
				<tui-button type="danger" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle" @click="addEvaluate(orderDetail)" v-if="item=='comment'">评价晒单</tui-button>
				
				<tui-button type="danger" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle"  @click="confim(orderDetail)" v-if="item=='confirm'">确认收货</tui-button>
				
				
				<tui-button type="danger" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle"  @click="cancel(orderDetail)" v-if="item=='cancel'">取消订单</tui-button>
				
				<tui-button type="danger" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle"  @click="pay(orderDetail)" v-if="item=='pay'">继续支付</tui-button>
				
				
				
				
			</view>
			
			
			<!-- <view class="tui-btn-mr">
				<tui-button type="black" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle"
					@click="refund">申请售后</tui-button>
			</view>
			<view class="tui-btn-mr">
				<tui-button type="danger" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle"
					@click="btnPay">立即支付</tui-button>
			</view> -->
		</view>
		<t-pay-way :show="show" @close="popupClose" :payMoney="orderDetail.order_amount" @pay="pays"></t-pay-way>
	</view>
</template>

<script>
	import {
		getOrderDetail,
		getOrderConfirm,
		getOrderApplyRefund,
		getOrderCancel,
		getShopPayPrepay
	} from "@/apis/index"
	import tPayWay from "@/components/t-pay-way/t-pay-way"

	export default {
		components: {
			tPayWay
		},
		data() {
			return {
				webURL: "https://www.thorui.cn/wx/static/images/mall/order/",
				//1-待付款 2-付款成功 3-待收货 4-订单已完成 5-交易关闭
				status: 1,
				show: false,
				orderDetail: {},
				sn:''
			}
		},
		onLoad(option) {
			if (option.order_sn) {
				this.sn=option.order_sn
				this.getDetail(option.order_sn)
			}

		},
		
		methods: {
			//取消订单
			async cancel(item) {
				uni.showModal({
					title: '提示',
					content: '确定取消订单吗？',
					success: (res) => {
						if (res.confirm) {
							getOrderCancel(item.id).then(ress=>{
								if (ress.code==1) {
									this.getDetail(item.id)
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//支付
			pay(item) {
				this.show = true
			},
			popupClose(e) {
				this.show = e.show
			},
			
			
			pays(e){
				
				let orderType
				if (e == 1) {
					orderType = 'money'
				}
				if (e == 2) {
					orderType = 'wechat'
				}
				if (e == 3) {
					orderType = 'alipay'
				}
				
				getShopPayPrepay({
					payment: orderType,
					order_sn: this.orderDetail.order_sn
				}).then(res => {
					this.getDetail(this.sn)
					if(res.code==1){
						// #ifdef H5
						uni.navigateTo({
							url:"/discountPage/success/success"
						})
						// #endif
						// #ifdef MP-WEIXIN
						uni.requestPayment({
							provider: 'wxpay',
							...res.data.pay_data,
							success: (res) => {
								// that.payResult('success');
								uni.navigateTo({
									url:"/discountPage/success/success"
								})
							},
							fail: (err) => {
								if (err.errMsg === 'requestPayment:fail cancel') {
									uni.showToast({
										title:'取消支付',
										icon:'none'
									})
								} else {
									// that.payResult('fail');
								}
							},
						});
						// #endif
					}
					
					
					
					
					
					
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					
			
				})
				
				
				
				
			},
			
			
			//退款申请
			async applyRefund(item){
					let res = await getOrderApplyRefund(item.id)
						this.getDetail(this.sn)
			},
			//收货
			async confim(item) {
				let resConfirm = await getOrderConfirm(item.id)
				if (resConfirm.code == 1) {
					uni.showToast({
						title: resConfirm.msg,
						icon: "none"
					})
					let res = await this.getList()
					this.list = res.data.data
					this.lastPage = res.data.last_page
				}
			},
			addEvaluate(item) {
				uni.navigateTo({
					url: `/templatePage/addEvaluate/addEvaluate?order_sn=${item.order_sn}`
				})
			},
			//订单详情
			getDetail(id) {
				getOrderDetail(id).then(res => {
					this.orderDetail = res.data
				})
			},
			getImg: function(status) {
				return this.webURL + ["img_order_payment3x.png", "img_order_send3x.png", "img_order_received3x.png",
					"img_order_signed3x.png", "img_order_closed3x.png"
				][status - 1]
			},
			getStatusText: function(status) {
				return ["等待您付款", "付款成功", "待收货", "订单已完成", "交易关闭"][status - 1]
			},
			getReason: function(status) {
				return ["剩余时间", "等待卖家发货", "还剩X天XX小时自动确认", "", "超时未付款，订单自动取消"][status - 1]
			},
			switchStatus() {
				let status = this.status + 1
				this.status = status > 5 ? 1 : status

				uni.showToast({
					title: '状态切换成功',
					icon: 'none'
				})
			},
			logistics() {
				uni.navigateTo({
					url: "/templatePage/logistics/logistics"
				})
			},
			btnPay() {
				this.show = true
			},
			popupClose() {
				this.show = false
			},
			refund() {
				uni.navigateTo({
					url: "/templatePage/refund/refund"
				})
			}
		}
	}
</script>

<style>
	.container {
		padding-bottom: 118rpx;
	}

	.tui-order-header {
		width: 100%;
		height: 160rpx;
		position: relative;
		background-color: #EB0909;
	}

	.tui-img-bg {
		width: 100%;
		height: 160rpx;
	}

	.tui-header-content {
		width: 100%;
		height: 160rpx;
		position: absolute;
		z-index: 10;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 70rpx;
		box-sizing: border-box;
	}

	.tui-status-text {
		font-size: 34rpx;
		line-height: 34rpx;
		color: #FEFEFE;
	}

	.tui-reason {
		font-size: 24rpx;
		line-height: 24rpx;
		color: rgba(254, 254, 254, 0.75);
		padding-top: 15rpx;
		display: flex;
		align-items: center;
	}

	.tui-reason-text {
		padding-right: 12rpx;
	}

	.tui-status-img {
		width: 80rpx;
		height: 80rpx;
		display: block;
	}

	.tui-flex-box {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.tui-icon-img {
		width: 44rpx;
		height: 44rpx;
		flex-shrink: 0;
	}

	.tui-logistics {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 24rpx 0 20rpx;
		box-sizing: border-box;
	}

	.tui-logistics-text {
		font-size: 26rpx;
		line-height: 32rpx;
	}

	.tui-logistics-time {
		font-size: 24rpx;
		line-height: 24rpx;
		padding-top: 16rpx;
		color: #666
	}

	.tui-addr {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-left: 20rpx;
		box-sizing: border-box;
	}

	.tui-addr-userinfo {
		font-size: 30rpx;
		line-height: 30rpx;
		font-weight: bold;
	}

	.tui-addr-text {
		font-size: 24rpx;
		line-height: 32rpx;
		padding-top: 16rpx;
	}

	.tui-addr-tel {
		padding-left: 40rpx;
	}

	.tui-order-item {
		margin-top: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.tui-goods-title {
		width: 100%;
		font-size: 28rpx;
		line-height: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}


	.tui-goods-item {
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.tui-goods-img {
		width: 180rpx;
		height: 180rpx;
		display: block;
		flex-shrink: 0;
	}

	.tui-goods-center {
		flex: 1;
		padding: 20rpx 8rpx;
		box-sizing: border-box;
	}

	.tui-goods-name {
		max-width: 310rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 26rpx;
		line-height: 32rpx;
	}

	.tui-goods-attr {
		font-size: 22rpx;
		color: #888888;
		line-height: 32rpx;
		padding-top: 20rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-price-right {
		text-align: right;
		font-size: 24rpx;
		color: #888888;
		line-height: 30rpx;
		padding-top: 20rpx;
	}

	.tui-color-red {
		color: #E41F19;
		padding-right: 30rpx;
	}

	.tui-goods-price {
		width: 100%;
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
		font-size: 24rpx;
	}

	.tui-size-24 {
		font-size: 24rpx;
		line-height: 24rpx;
	}

	.tui-price-large {
		font-size: 32rpx;
		line-height: 30rpx;
	}

	.tui-goods-info {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		background: #fff;
	}

	.tui-price-flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 5rpx;
	}

	.tui-size24 {
		padding-bottom: 20rpx;
		font-size: 24rpx;
		line-height: 24rpx;
		color: #888;
	}

	.tui-size32 {
		font-size: 32rpx;
		line-height: 32rpx;
		font-weight: 500;
	}

	.tui-pbtm20 {
		padding-bottom: 20rpx;
	}

	.tui-flex-shrink {
		flex-shrink: 0;
	}

	.tui-primary-color {
		color: #EB0909;
	}

	.tui-order-info {
		margin-top: 20rpx;
	}

	.tui-order-title {
		position: relative;
		font-size: 28rpx;
		line-height: 28rpx;
		padding-left: 12rpx;
		box-sizing: border-box;
	}

	.tui-order-title::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		border-left: 4rpx solid #EB0909;
		height: 100%;
	}

	.tui-order-content {
		width: 100%;
		padding: 24rpx 30rpx;
		box-sizing: border-box;
		background: #fff;
		font-size: 24rpx;
		line-height: 30rpx;
	}

	.tui-order-flex {
		display: flex;
		padding-top: 18rpx;
	}

	.tui-order-flex:first-child {
		padding-top: 0
	}

	.tui-item-title {
		width: 132rpx;
		flex-shrink: 0;
	}

	.tui-item-content {
		color: #666;
		line-height: 32rpx;
	}

	.tui-safe-area {
		height: 1rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-tabbar {
		width: 100%;
		height: 98rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 26rpx;
		box-shadow: 0 0 1px rgba(0, 0, 0, .3);
		z-index: 996;
	}

	.tui-btn-mr {
		margin-right: 30rpx;
	}

	.tui-contact {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
	}

	.tui-contact image {
		width: 36rpx;
		height: 36rpx;
		margin-right: 16rpx;
	}
</style>